{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<style>.holistica-form-grid>div{min-width:0}.holistica-form-grid input:not([type=checkbox]),.holistica-form-grid select,.holistica-form-grid textarea{width:100%;max-width:100%;box-sizing:border-box;min-height:44px;padding:10px;border:1px solid #9aabba;border-radius:9px}@media(max-width:750px){.holistica-form-grid{grid-template-columns:1fr!important}}</style>
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">🗓️</div>
      <div>
        <h1 class="h1" style="margin:0">{% if mode == "create" %}New Slot{% else %}Edit Slot{% endif %}</h1>
        <div class="small">Set provider availability and appointment times.</div>
      </div>
      <div style="margin-left:auto;display:flex;gap:8px;flex-wrap:wrap">
        <a class="btn" href="{% url 'website:staff_slot_list' %}">← Back</a>
      </div>
    </div>

    <div class="sep"></div>

    <form method="post">
      {% csrf_token %}
      {% if form.errors %}<div class="card" role="alert">{{ form.non_field_errors }}{% for field in form %}{{ field.errors }}{% endfor %}</div>{% endif %}
      <div class="grid grid-3 holistica-form-grid">
        <div><label class="label" for="{{ form.provider.id_for_label }}">Provider</label>{{ form.provider }}</div>
        <div><label class="label" for="{{ form.start_at.id_for_label }}">Start date & time</label>{{ form.start_at }}</div>
        <div><label class="label" for="{{ form.end_at.id_for_label }}">End date & time</label>{{ form.end_at }}</div>
        <div><label class="label" for="{{ form.capacity.id_for_label }}">Patient capacity</label>{{ form.capacity }}</div>
        <div><label class="label" for="{{ form.is_active.id_for_label }}">Available for booking</label>{{ form.is_active }}</div>
      </div>
      <p class="small">Times use your configured local timezone. To create multiple slots, use Bulk generate.</p>
      <div style="margin-top:14px">
        <button class="btn" type="submit">Save</button>
      </div>
    </form>
  </div>
</section>
{% endblock %}